<template>
  <div style="width:100%">
    <div style="width:100%" class="eval_container">
      <el-select
        v-model="temValue"
        multiple
        collapse-tags
        :disabled="finalDisabled"
        v-bind="$attrs"
        class="left"
        @change="changeTem">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" :disabled="finalDisabled" @click="addAllTags" style="margin-left: 10px;">
        表单导入
      </el-button>
    </div>
    <div style="font-size: 16px;padding-top: 10px;color: #7c7d82;">{{ defaultText || '默认指标' }}</div>
    <el-tag
      v-for="(tag, index) in tags"
      :key="index"
      :closable="!finalDisabled"
      type=""
      @close="closeTag(tag)">
      {{tag.label}}
    </el-tag>
  </div>
</template>
<script>
import datasource from "../../mixins/datasource";
export default {
  name: 'evaluationIndex',
  mixins: [datasource],
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    defaultText: {
      type: String,
      default: ''
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    tags() {
      const arr = this.options && this.options.filter(o => this.value && this.value.split(',').some(v => v === o.value))
      // const arr = this.value && this.value.split(',').map(i => {
      //   console.log(i)
      //   const item = i.split('&&')
      //   return {
      //     value: item[0],
      //     label: item[1]
      //   }
      // })
      // console.log(arr,'====tags')
      return arr
    },
   
  },
  data() {
    return {
      // options: ['指标名称', '资源类别', '指标定义', '权重分数', '使用角色', '供应方', '需求方', '更新时间', '是否启用'],
      temValue: [],
    }
  },
  created(){
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.temValue = val.split(',')
        } else {
          this.temValue = []
        }
      }
    }
  },
  methods: {
    closeTag(tag) {
      let val = this.value.split(',')
      val.splice(val.indexOf(tag.value), 1)
      this.$emit('input', val.join(','))
    },
    addAllTags() {
      this.$emit('input', this.options.map(i => i.value).join(','))
    },
    changeTem(val) {
      let options = this.options.filter(i => val.some(j => j === i.value))
      options = options.map(i => i.value)
      this.$emit('input', options.join(','))  
    }
  }
}
</script>
<style lang="scss" scoped>
  .eval_container {
    display: flex;
    .left {
      flex: 1;
    }
  }
  .el-tag {
    margin-right: 10px;
  }
</style>